<template>
  <div id="app">
    <!-- 顶部 -->
      <mt-header fixed title="DJ商城"></mt-header>
    <!-- 中间内容 -->
      <div class="middleContainter">
        <transition>
          <router-view></router-view>
        </transition>
      </div>

   
<!-- 底部nav -->
   <nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item-my" to="/home">
				<span class="mui-icon iconfont icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item-my" to="/vip">
				<span class="mui-icon iconfont icon-user"></span>
				<span class="mui-tab-label">会员</span>
			</router-link>
			<router-link class="mui-tab-item-my" to="/cart">
				<span class="mui-icon iconfont icon-sound"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="mui-tab-item-my" to="/search">
				<span class="mui-icon iconfont icon-search"></span>
				<span class="mui-tab-label">搜索</span>
			</router-link>
		</nav>




      <!-- <mt-tabbar v-model="selected" >
        
            <mt-tab-item id="c1">
              <span slot="icon" class="iconfont icon-home"></span>
              首页
            </mt-tab-item>
        
            <mt-tab-item id="c2">
            <span slot="icon" class="iconfont icon-user"></span>
              会员
            </mt-tab-item>
    
          <mt-tab-item  id="c3">
                  
                    <span slot="icon" class="iconfont icon-sound iconfa" >
                      <mt-badge size="small" type="error" class="iconson">30</mt-badge>
                    </span>
            购物车
          </mt-tab-item>

        <mt-tab-item id="c4">
          <span slot="icon" class="iconfont icon-search"></span>
          搜索
        </mt-tab-item>  
           
      </mt-tabbar> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      // selected:'c1',
    }
  },

  // watch:{
  //     selected(newval,oldval){
  //       console.log(newval+"------"+oldval);
  //       switch (newval) {
  //         case 'c1':
  //           this.$router.push({
  //             path:'/home'
  //           })
  //           break;
  //         case 'c2':
  //           this.$router.push({
  //             path:'/vip'
  //           })
  //           break;
  //         case 'c3':
  //           this.$router.push({
  //             path:'/cart'
  //           })
  //           break;
  //         case 'c4':     
  //           this.$router.push({
  //             path:'/search'
  //           })
  //           break;
        
  //       }
  //     }
  // }

  }

</script>

<style>
/* .v-enter,.v-leave-to{
  opacity: 0;
  transform: translateX(100%);
} */
.v-enter{
  opacity: 0;
  transform: translateX(100%);
}
.v-leave-to{
  opacity:0 ;
  transform: translateX(-100%);
  position: absolute;
}
.v-enter-active,.v-leave-active{
  transition: all .6s ease
}
.mint-header.is-fixed{
  z-index: 9999;
}

</style>
